import React, { Component } from 'react'
// import PropTypes from 'prop-types'
import Pubsub from 'pubsub-js' 
// import axios from 'axios'
import './index.css'

export default class index extends Component {

  /*
    发布网络请求的方式：
      1. xhr 对象 浏览器本身的一个对象
        因为原生再使用起来需要写大量的代码 所以有很多的封装库 如 ajax axios
      
      2. fetch 新的API  基于Promise的  基于 关注分离 -- 将事情拆分 完成之后才可以继续的做
        所以fetch基本要then两次才会有结果，因为第一次then是判断跟服务器有没有链接成功
        成功之后再调用 成功返回对象的 json() 方法

        这里有个细节 有时候服务器给的状态码就算是404等等报错的状态码，第一个then也是返回成功，
        因为第一个then判断的是跟服务器有没有链接，只有跟服务器都没有链接才会直接走失败的接口
          当网络断开 或者服务器死机才会发生
        

        总结： fetch是除了xhr以外的另外一个可以访问接口的一个API，符合关注分离的开发模式，但是使用的还是比较少
          主要原因是api在使用上可能还没有axios的api好用  并且这个api的兼容性相对比较差，老浏览器不兼容
  */ 

  getSearch = async ()=>{
    /* 深层次的解构赋值 keyWordElement就是这个DOM value对应的就是DOM的值  再加一个:keyWord 就是对这个进行重新赋名 */ 
    const {keyWordElement:{value:keyWord}} = this
    // this.props.getSearchData({status:1})
    Pubsub.publish('hasSearch',{status:1})
    // 连续解构赋值 + 重命名
    try{
      // let res = await axios.get(`https://api.github.com/search/users?q=${keyWord}`)

      let response = await fetch(`https://api.github.com/search/users?q=${keyWord}`)

      let res = await response.json()

      console.log('获取成功',res,response)
      }catch(err){
        console.log('失败',err.message)
        Pubsub.publish('hasSearch',{status:2})

      }
    
  }

  render() {
    return (
      <div className="headers">
        <div className="searchTitle" >Search Github Users</div>
        <div className="InputArea">
          <input ref={c=>this.keyWordElement=c} type="text"/> <button onClick={this.getSearch}>Search</button>
        </div>
      </div>
    )
  }
}
